<template>
	<view class="wrap">
		<view class="Dame">
			<view class="ation">
				<view class="f32 " style="width: 100rpx;">
					邮箱:
				</view>
				<input v-model="email" type="text" placeholder="请输入用户邮箱"  style="width:calc(100% - 120rpx);margin-left:0"/>
			</view>
			<view class="ation">
				<view class="f32 " style="width: 100rpx;">
					户籍:
				</view>
				<input v-model="domicile" type="text" placeholder="请输入用户户籍" style="width:calc(100% - 120rpx);margin-left:0"/>
			</view>
			<view class="ation">
				<view class="f32 " style="width: 100rpx;">
					性别:
				</view>
				<radio-group @change="onGenderChange" style="font-size: 32rpx;margin-left:0" v-model="gender" >
					<label>
						<radio :value="0" :checked="gender === 1" /> 男
					</label>
					<label style="margin-left: 12rpx;">
						<radio :value="1" :checked="gender === 0" /> 女
					</label>
				</radio-group>
			</view>
			<view class="ation" style="padding-bottom: 10rpx;">
				<view class="Inform">
					出生日期:
				</view>
				<view  style="height: 100%;font-size: 32rpx;">
					<picker start="1980-01-01" mode="date" :value="date" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
			</view>

		</view>
		<view class="card">
			<view class="">
				<text
					style="font-weight: 400;font-size: 28rpx;color: #4E5969;line-height: 44rpx;text-align: left;font-style: normal;text-transform: none;">请拍摄/上传本人真实有效的身份证照片
				</text>
			</view>
			<view class="">
				<text style="font-weight: 400;font-size: 32rpx;color: #1D2129;line-height: 48rpx;">身份证人像面</text>
			</view>
			<view class="front" >
				<image v-if="frontal" :src="frontal" mode="aspectFit" style="width: 320rpx;height: 204rpx;" @click="obverse"></image>
				<image  :src="card_zm" mode="aspectFit"
					style="width: 320rpx;height: 204rpx;" v-if="!frontal" @click="obverse"></image>
					<image :src="paishe" v-if="!frontal" mode="aspectFill" style="width: 132rpx; height: 132rpx;position: absolute;left: 86rpx;top: 28rpx;" @click="obverse"></image>
			</view>
			<view class="">
				<text style="font-weight: 400;font-size: 32rpx;color: #1D2129;line-height: 48rpx;">身份证国徽面</text>
			</view>
			<view class="front" >
				<image v-if="reverse" :src="reverse" mode="aspectFit" style="width: 320rpx;height: 204rpx;" @click="opposite"></image>
				<image  :src="card_bm" mode="aspectFit" style="width: 320rpx;height: 204rpx;" v-if="!reverse" @click="opposite">
				</image>
				<image :src="paishe" mode="aspectFill" style="width: 132rpx; height: 132rpx;position: absolute;left: 86rpx;top: 28rpx;" v-if="!reverse" @click="opposite"></image>
			</view>
		</view>
		<button @click="quereng" style="background: #609DA0;border-radius: 96rpx;color:#fff">确认</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				range: [{
						value: 0,
						text: "女"
					},
					{
						value: 1,
						text: "男"
					},
				],
				open: '',
				email: '', //邮箱
				birthday: '', //生日
				domicile: '', //户籍
				gender: '', //性别
				date: '请选择出生日期',
				frontal: '',
				reverse: '',
				card_zm: "",
				card_bm: "",
				paishe:""
			}
		},
		onLoad() {
			this.getData()
			let self = this
			self.card_zm = self.websiteUrl + '/image/sfz/card_zm.png'
			self.card_bm = self.websiteUrl + '/image/sfz/card_bm.png'
			self.paishe = self.websiteUrl + '/image/sfz/paishe.png'
		},
		methods: {
			onGenderChange(e) {
				console.log(e,1111);
				this.gender = e.detail.value
			},
			/*获取数据*/
			getData() {
				let self = this;
				self._get('user.index/detail', {}, function(res) {
					self.reverse = res.data.userInfo.sfzback
					self.frontal = res.data.userInfo.sfzpositive
					self.email = res.data.userInfo.email
					self.domicile = res.data.userInfo.domicile
					self.birthday = res.data.userInfo.birthday
					self.open = res.data.userInfo.gender
					self.gender = res.data.userInfo.gender
					console.log(self.gender,'255');
					self.date = self.timestampToTime(res.data.userInfo.birthday)
				});
			},
			bindDateChange(e) {
				this.date = e.detail.value
				this.birthday = new Date(e.detail.value) / 1000
				console.log(this.birthday);
			},
			timestampToTime(timestamp) {
				console.log(timestamp, '++++++++++++++');
				timestamp = timestamp ? timestamp * 1000 : null;
				let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let Y = date.getFullYear() + '-';
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return Y + M + D;
			},
			quereng() {
				this._post('user.user/realNameAuthentication', {
					email: this.email,
					birthday: this.birthday,
					domicile: this.domicile,
					gender: this.gender
				}, (res) => {
					if (res.code) {
						uni.showToast({
							title: res.msg
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})
			},
			change(e) {
				console.log(e);
				this.gender = e
			},
			obverse() {
				let params = {
					token: uni.getStorageSync('token'),
					app_id: '10001',
					type: 1
				};
				uni.chooseImage({
					success: (chooseImageRes) => {
						console.log(chooseImageRes, 'chooseImageRes')
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.frontal = tempFilePaths[0];
						uni.uploadFile({
							url: 'https://hlz.yicha.xin/index.php/api/gongzheng.index/UploadFile', // 惠来
							// url: 'https://guangbang.rchz.top/index.php/api/gongzheng.index/UploadFile', // 广邦
							filePath: tempFilePaths[0],
							name: 'iFile',
							formData: params,
							success: (uploadFileRes) => {}
						});
					}
				});
			},
			opposite() {
				let params = {
					token: uni.getStorageSync('token'),
					app_id: '10001',
					type: 2
				};
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.reverse = tempFilePaths[0];
						uni.uploadFile({
							url: 'https://hlz.yicha.xin/index.php/api/gongzheng.index/UploadFile',
							// url: 'https://guangbang.rchz.top/index.php/api/gongzheng.index/UploadFile',
							filePath: tempFilePaths[0],
							name: 'iFile',
							formData: params,
							success: (uploadFileRes) => {}
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-popup {
	  z-index: 10075 !important;
	}
	.wrap {
		padding: 20rpx;
	}

	.card {
		padding: 0 20rpx;
		padding-left: 40rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 16rpx;

		.front {
			width: 100%;
			border: 1rpx solid #f5f5f5;
			margin: 20rpx 0;
			position: relative;
			image {
				width: 600rpx;
				height: 260rpx;
			}
		}
	}

	::v-deep .uni-select {
		border: none !important;
	}

	::v-deep .uni-select__input-placeholder {
		font-size: 32rpx;
	}

	.Dame {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;

		button {
			width: 220rpx;
			background-color: cadetblue;
			color: #fff;
			margin: 0 auto;
		}
	}

	.ation {
		display: flex;
		padding: 20rpx;
		align-items: center;

		input {
			margin-left: 20rpx;
		}

		.Inform {
			font-size: 32rpx;
			width: 142rpx;
		}
	}
</style>